<template>
	<view class="zcModel-card zcRelative" @tap="doMyCustomerInfo(item)" :class="[((index+1)%3===0)?'color3':(((index+1)+3)%3===2)?'color2':'color1',isPublish?'isPublish':'']">
		<view class="zcModel-card-box">
			<view class="zcModel-card-item uni-flex zcAlignI_center zcJustifyC_between">
				<view class="uni-flex zcAlignI_center">
                    <view class='title zcOverflow3'>{{item.CustomerName}}</view>
                    <view>{{item.CustomerTelephone}}</view> 
                </view> 
                <view :style="{'color':item.VehiclePlateNoIsWrong?'#F36909':''}">{{item.VehiclePlateNoIsWrong?'过户待定':''}}</view>
			</view>
			<view class="zcModel-card-item uni-flex zcAlignI_center" style="height: 24upx;">
				<view class='content '>{{item.VehiclePlateNo?item.VehiclePlateNo:''}}</view>
			</view>
			<view class="zcModel-card-item uni-flex zcAlignI_center zcJustifyC_between bottomDate">
				<view >{{item.VehicleMaker}}</view>
				<view>{{item.InsureEndDate}}</view>
			</view>
		</view>
		<view class='mark' :class="{'mark_active':isSalesManRead}"></view>
	</view>
</template>

<script>
	
	export default{
		props:{
			item:Object,
			index:Number,
			isPublish:{
				type:Boolean,
				default:true
			},
			isSalesManRead:{
				type:Boolean,
				default:false
			}
		},
		methods:{
			doMyCustomerInfo(item) {
				item.index = this.index;
				this.$emit("doMyCustomerInfo",item);
			},
		}
	}
</script>

<style>
	.zcModel-card{margin-bottom: 30upx;margin: 0 60upx;margin-top: 20upx;background-color: #FFFFFF!important;padding: 20upx;box-shadow: 0 1px 5px #CCCCCC;border-radius: 20upx;}
	.zcModel-card>view{padding-left: 60upx;}
	.zcModel-card>view .zcModel-card-item:first-child{padding-bottom: 20upx;align-items: flex-end!important;padding-right: 40upx;}
	.zcModel-card>view .zcModel-card-item:first-child view:first-child{margin-right: 20upx;font-size: 28upx;margin-bottom: 3upx;}
	.zcModel-card>view .zcModel-card-item:first-child view:last-child{font-size: 22upx;color: #333333;}
	.zcModel-card>view .zcModel-card-item:last-child view{font-size: 22upx;}
	.zcModel-card-item{background-color: #FFFFFF;padding: 10upx 0;box-sizing: border-box;line-height: 1;}
	.zcModel-card-item view{box-sizing: border-box;font-size: 30upx;color: #999999;line-height: 1!important;}
	.zcModel-card-item view:first-child{color: #333333;}
	.zcModel-card-item-text{white-space: normal;display: block;}
	.zcModel-title{padding: 10upx 0;display: flex;}
		.color1{border-left: 2px solid #3CA4FA;}
	.color2{border-left: 2px solid #FF3333;}
	.color3{border-left: 2px solid #FFAE5D;}
	.title{
		max-width:400upx ;
	}
	.content{
			max-width:500upx ;
		padding-top: 10upx;
		min-height: 60upx;
	}
	.isPublish {
		margin: 0 40upx;
		margin-bottom: 30upx;
	}
.isPublish	.zcModel-card-box{
	padding-left: 40upx;
}
.isPublish .content{
	padding-top: 20upx ;
	font-size: 26upx;
	height: 72upx;
	box-sizing: border-box;
	vertical-align: middle;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.isPublish .bottomDate{
	margin-top: 30upx;
}
.mark{
	position: absolute;
	top: 20upx;
	right: 20upx;
	width: 20upx !important;
	height: 20upx;
	border-radius: 50%;
	background-color: #40A3F1;
	padding-left: 0 !important;
}
.mark_active{background-color: #FFFFFF;}
</style>
